import * as React from 'react';
//建立页面数据和store 的关联
import { connect } from 'react-redux'
import { Post, Get, Patch, Put } from '../../utils/utilHttp'
import { Link, RouteComponentProps } from 'react-router-dom';
import { Button, WhiteSpace, WingBlank,Pagination,Icon } from 'antd-mobile';
import demo from './index.js'
import '../../utils/common.scss'
import './index.scss'

import Top from '../../components/top/top'

interface IState {
  time23:any
}
interface IProps extends RouteComponentProps {
}
class Getstart extends React.Component<IProps, IState> {
  state = {
    time23:undefined
  }
  componentDidMount(){
    setTimeout(() => {
      demo();
      this.setState(()=>
        ({time23:2222222222222})
      )
    }, 500);
  }
  //点击防抖
  debounce=(fn:any,time:any)=>{
    console.log(111111)
    let timer:any = null;
    let _this:any=this;
    return function(){
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(()=>{
            fn.apply(_this)
        },time)
    }
  }
  //防抖执行函数
  fn=()=>{
    console.log('222222222222')
  }
  //测试事件对象
  thisClick=(event:any)=>{
    console.log(event);
  }
  render() {
    let {} =this.state;
    return (
      <div className='Getstart'>
        <Top history={this.props.history}></Top>
        <Button onClick={()=>{this.debounce(this.fn,1000)}}>按钮</Button>

        <div className='me_box'>
          <div className='me_main'>
            <div className='font_36'>《ES6》<a className='font_24' href='https://www.bilibili.com/video/av61592183?from=search&seid=8673684827131102890'>链接</a></div>
            <div className='box'>
              <div className='main'>dasdasdsadsadasasdasdasdadasdasdasdaasdasdsdsadsadsadsaddasdasdsadsadasasdasdasdadasdasdasdaasdasdsdsadsadsadsaddasdasdsadsadasasdasdasdadasdasdasdaasdasdsdsadsadsadsaddasdasdsadsadasasdasdasdadasdasdasdaasdasdsdsadsadsadsad</div>
            </div>
            <div className='aa'>
              <span>1111111111111111111111111111111111111111111</span>
              <span>1111111111111111111111111111111111111111111</span>
            </div>
    <div onClick={(event)=>{this.thisClick(event)}}>111111111111111{this.state.time23}</div>
          </div>
        </div>
      </div>
    )
  }
}


//将store里面的数据映射到props 这个数据
//就是取store的数据 然后操作 赋值给页面的变量
//将页面数据和全局数据绑定
const mapState = ({ store }: any) => {
  return ({
    isLogin: store.isLogin,
    userInfo:store.userInfo
  })
}

const mapDispatch = ({ store }: any) => ({
  // changeLoaderType() {
  //   store.changeLoaderType(true)
  // }
  setPlayListAct(data:any){
    store.setPlayListAct(data)
  },
  setMp3ListAct(data:any){
    store.setMp3ListFun(data)
  },
})
//返回了 connect 其实是一个容器组件
export default connect(mapState, mapDispatch)(Getstart); 
